<template>
  <div class="container">
    <div class="mainContainer">
      <v-alchemyNav></v-alchemyNav>
      <div class="right">

        <div class="bottom">
          <h2>操作记录</h2>
          <ul class="tab_head">
            <li>
              <span>{{gametype}}数量</span>
              <span>金丹</span>
              <span>银丹</span>
              <span>仙丹</span>
              <span>青丹</span>
              <span>游戏时间</span>
            </li>
          </ul>
          <ul class="tab_bot">
            <li v-for='(item,index) in data' :key='index'>
              <span class="">{{item.bpx_num}}</span>
              <span class="">{{item.jindan}}</span>
              <span class="">{{item.yindan}}</span>
              <span class="">{{item.xiandan}}</span>
              <span class="">{{item.qingdan}}</span>
              <span>{{item.game_time}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import alchemyNav from "../alchemy_nav.vue";

export default {
  name: "ginseng_gameLog",
  components: {
    "v-alchemyNav": alchemyNav
  },
  data() {
    return {
      list: "",
      data: [],
      username: "",
      gametype: u.getStore("winning").bitype
    };
  },
  created() {
    this.username = u.getStore("user").name;
    var that = this;
    let timer = setInterval(() => {
      if (u.flag) {
        //查询是否中奖
        u.getLdResult({ username: this.username }, data => {
          if (data[0].code == 200) {
            this.data = data[0].data;
          }
        });
        clearInterval(timer);
      }
    }, 10);
  },
  mounted: function() {
    $(".nav_aside>li:eq(1)")
      .find("a")
      .css({
        background:
          "url(../..../../../static/image/bg_btn.png) no-repeat scroll top left",
        "background-size": "100%"
      });
    this.$parent.flag1 = false;
    this.$parent.flag2 = true;
  },
  methods: {
    toRecharge() {
      this.$router.push({ path: "/ginseng_recharge" });
      location.reload();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px 0;
  width: 100%;
  min-width: 1200px;
  min-height: 968px;
  background-image: url("../../../static/image/ginsengbg2.png");
  background-size: 100% 100%;
}

.mainContainer {
  margin: 0 auto;
  max-width: 1290px;
  display: flex;
  flex-direction: row;
}

.right {
  width: 80%;
  height: 100%;
  margin-left: 2%;
}

.top {
  width: 100%;
  height: 287px;
  background: url(../../..../../../static/image/z_2.png) no-repeat scroll top
    left;
  background-size: 100% 80%;
  padding: 2% 8% 7% 2%;
}

.first {
  display: flex;
  flex-direction: row;
  height: 25%;
}

span {
  font-size: 18px;
  line-height: 36px;
  font-family: "MicrosoftYaHei";
  color: #ffffff;
  text-shadow: -2px 1px 1px #3a230a, 2px -1px 1px #3a230a;
  margin-right: 1%;
  white-space: nowrap;
  margin-bottom: 1%;
}

.first p {
  font-size: 26px;
  line-height: 34px;
  font-family: "MicrosoftYaHei";
  color: #ffffff;
  text-shadow: -2px 1px 1px rgba(137, 64, 0, 0.75),
    2px -1px 1px rgba(137, 64, 0, 0.75);
  margin-right: 5%;
}

.first a {
  width: 140px;
  height: 36px;
  background: url(../../..../../../static/image/z_1.png) no-repeat scroll top
    left;
  background-size: 100% 100%;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
  color: white;
  font-family: "MicrosoftYaHei";
  text-shadow: -2px 3px 3px rgba(134, 7, 0, 0.75),
    2px -2px 1px rgba(134, 7, 0, 0.75);
}

.sec {
  display: flex;
  flex-direction: row;
}

.text {
  height: 173px;
  font-size: 20px;
  line-height: 30px;
  font-family: "MicrosoftYaHei";
  color: #ffffff;
  text-shadow: -2px 1px 1px rgba(137, 64, 0, 0.75),
    2px -1px 1px rgba(137, 64, 0, 0.75);
}

.bottom {
  width: 100%;
  height: 100%;
  min-height: 945px;
  background: url(../../..../../../static/image/addBg.png) no-repeat scroll top
    left;
  background-size: 100% 100%;
  padding: 3% 3% 5%;
}

.bottom h2 {
  width: 30%;
  height: 71px;
  background: url(../../..../../../static/image/z_3.png) no-repeat scroll top
    left;
  background-size: 100% 100%;
  text-align: center;
  font-size: 20px;
  line-height: 38px;
  font-family: "MicrosoftYaHei-Bold";
  color: #ffffff;
  text-shadow: -2px 1px 1px #1c6b65, 2px -1px 1px #1c6b65;
  font-weight: bold;
  margin-left: 35%;
}

.tab_head {
  width: 100%;
  height: 60px;
  background: url(../../..../../../static/image/z_4.png) no-repeat scroll top
    left;
  background-size: 100% 100%;
  margin-top: 6%;
  margin-bottom: 1%;
}

.tab_head li {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 1%;
  font-size: 20px;
  font-family: "MicrosoftYaHei-Bold";
  text-shadow: -2px 1px 1px rgba(137, 64, 0, 0.75),
    2px -1px 1px rgba(137, 64, 0, 0.75);
}
.tab_head li span {
  width: 14%;
  text-align: center;
}
.tab_bot {
  width: 100%;
  height: 377px;
  overflow: auto;
}

.tab_bot li {
  background: url(../../../static/image/z_5.png) no-repeat scroll top left;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-family: "微软雅黑";
  text-shadow: -2px 1px 1px #3a230a, 2px -1px 1px #3a230a;
  padding-top: 1%;
}
.tab_bot li span {
  text-align: center;
  width: 33%;
}
.tab_bot li span:last-child {
  text-shadow: -2px 1px 1px #2e822e, 2px -1px 1px #2e822e;
  cursor: pointer;
}
.tab_bot::-webkit-scrollbar {
  width: 10px;
}

.tab_bot::-webkit-scrollbar-track-piece {
  background-color: #ebcf8f;
  -webkit-border-radius: 5px;
}

.tab_bot::-webkit-scrollbar-thumb:vertical {
  background-color: #b6e866;
  -webkit-border-radius: 5px;
}

.title1 {
  width: 29%;
}

.title2 {
  width: 64%;
}

.title3 {
  width: 40%;
}

.title4 {
  width: 43%;
}

.title5 {
  width: 17%;
}
</style>
